import React, { useState, useCallback } from 'react';
import MapRenderer from './components/MapRenderer';
import ControlPanel from './components/ControlPanel';
import ZoomControls from './components/ZoomControls';
import StatusIndicator from './components/StatusIndicator';

function App() {
  // 应用状态
  const [viewState, setViewState] = useState({
    center: [0, 0],
    zoom: 0
  });
  
  const [layerState, setLayerState] = useState({
    showTiles: true,
    showVectors: true
  });

  // 处理视图变化
  const handleViewChange = useCallback((center, zoom) => {
    setViewState({ center, zoom });
  }, []);

  // 处理中心点变化
  const handleCenterChange = useCallback((center) => {
    setViewState(prev => ({ ...prev, center }));
  }, []);

  // 处理缩放变化
  const handleZoomChange = useCallback((zoom) => {
    setViewState(prev => ({ ...prev, zoom }));
  }, []);

  // 切换瓦片显示
  const handleToggleTiles = useCallback(() => {
    setLayerState(prev => ({ ...prev, showTiles: !prev.showTiles }));
  }, []);

  // 切换矢量数据显示
  const handleToggleVectors = useCallback(() => {
    setLayerState(prev => ({ ...prev, showVectors: !prev.showVectors }));
  }, []);

  return (
    <div className="app">
      {/* 地图容器 */}
      <div className="map-container">
        <MapRenderer
          center={viewState.center}
          zoom={viewState.zoom}
          showTiles={layerState.showTiles}
          showVectors={layerState.showVectors}
          onViewChange={handleViewChange}
        />
        
        {/* 控制面板 */}
        <ControlPanel
          center={viewState.center}
          zoom={viewState.zoom}
          showTiles={layerState.showTiles}
          showVectors={layerState.showVectors}
          onCenterChange={handleCenterChange}
          onZoomChange={handleZoomChange}
          onToggleTiles={handleToggleTiles}
          onToggleVectors={handleToggleVectors}
        />
        
        {/* 缩放控制 */}
        <ZoomControls
          zoom={viewState.zoom}
          onZoomChange={handleZoomChange}
        />
        
        {/* 状态指示器 */}
        <StatusIndicator
          center={viewState.center}
          zoom={viewState.zoom}
          showTiles={layerState.showTiles}
          showVectors={layerState.showVectors}
        />
      </div>
      
      {/* 欢迎信息（仅在首次加载时显示） */}
      <div style={{
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        background: 'rgba(0, 0, 0, 0.8)',
        padding: '24px',
        borderRadius: '12px',
        border: '1px solid rgba(255, 255, 255, 0.2)',
        backdropFilter: 'blur(10px)',
        textAlign: 'center',
        zIndex: 1000,
        animation: 'fadeOut 3s ease-in-out forwards',
        animationDelay: '2s'
      }}>
        <h2 style={{ 
          color: 'white', 
          marginBottom: '12px',
          fontSize: '20px'
        }}>
          地图瓦片系统
        </h2>
        <p style={{ 
          color: '#a0aec0', 
          fontSize: '14px',
          lineHeight: '1.5'
        }}>
          拖拽地图平移 • 滚轮缩放 • 双击快速缩放
        </p>
      </div>
      
      {/* 自定义动画样式 */}
      <style>{`
        @keyframes fadeOut {
          0% { opacity: 1; }
          70% { opacity: 1; }
          100% { opacity: 0; visibility: hidden; }
        }
      `}</style>
    </div>
  );
}

export default App;